<template>
<!--我的订单-->
  <div class="orders">
      <Tabs :animated="false" active-key="key1"  v-model="tab" @on-click="changeTab">
          <TabPane label="待开票" key="key1">
              <span v-if="waitInvoices.length > 0">
                <ul class="inforList font14" v-for="invoice in waitInvoices">
                  <li class="title">
                    <p>订单号：{{invoice.id}}</p>
                  </li>
                  <li>
                    <p>订单金额：¥{{invoice.orderAmount}}</p>
                  </li>
                    <li>
                    <p>订单时间：¥{{invoice.createTime}}</p>
                  </li>
                </ul>
                <div class="pageout"><Page :total="total" :pageSize="size" :current="pageNumber" @on-change="changePage"/></div>
              </span>
              <span v-else>
                <nodata tip="暂时还没有待开票记录~"></nodata>
              </span>
          </TabPane>
          <TabPane label="已开票" key="key2">
              <span v-if="invoices.length > 0">
                <ul class="inforList font14" v-for="invoice in invoices">
                  <li class="title">
                    <p>订单号：{{invoice.orderId}}</p>
                    <span class="pull-right" style="color: #957960" v-if=" invoice.einvoice != 1 && (invoice.expressNo === '' || invoice.expressNo === undefined || invoice.expressNo === null)">待邮寄</span>
                  </li>
                  <li>
                    <p class="listLeft" v-if="invoice.einvoice == 1">发票类型：电子发票</p>
                    <p class="listLeft" v-else>发票类型：纸质发票</p>
                    <p class="listRight">发票内容：{{invoice.invoiceBody}}</p>
                  </li>
                  <li>
                    <p class="listLeft">商品金额：¥{{invoice.invoiceAmount}}</p>
                    <p class="listRight" v-if="invoice.invoiceType == 1">抬头类型：个人发票</p>
                    <p class="listRight" v-else>抬头类型：企业发票</p>
                  </li>
                  <li v-if="invoice.einvoice == 1">
                    <p class="listLeft" >邮箱：{{invoice.email}}</p>
                    <p class="listRight">申请时间：{{invoice.createTime | timeFilter}}</p>
                  </li>
                  <li v-if="invoice.einvoice == 0" class="clearfix">
                    <p class="listLeft" >申请时间：{{invoice.createTime | timeFilter}}</p>
                    <p class="listRight" v-if="invoice.expressNo !== '' && invoice.expressNo !== undefined && invoice.expressNo !== null">快递名称：{{invoice.expressCompany}}</p>
                  </li>
                  <li class="clearfix" v-if="invoice.einvoice == 0 && invoice.expressNo !== '' && invoice.expressNo !== undefined && invoice.expressNo !== null">
                    <p class="listLeft" >快递单号：{{invoice.expressNo}}</p>
                    <Button class="nextbtn" shape="circle" @click="copyExpressNo(invoice.expressNo)">复制订单号</Button>
                  </li>
                </ul>
                <div class="pageout"><Page :total="total" :pageSize="size" :current="pageNumber" @on-change="changePage"/></div>
              </span>
              <span v-else>
                <nodata tip="暂时还没有发票记录哦~"></nodata>
              </span>
          </TabPane>
      </Tabs>
      <Spin fix v-show="isSpinShow" >
        <div class="loader">
          <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
          <div class="font14">加载中...</div>
        </div>
      </Spin>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .titleWrap {
    height: 40px;
    /*font-size: 18px;*/
    padding-bottom: 20px;
    /*text-align: justify-all;*/
    border-bottom: 1px solid #E1E1E1;
    /*margin-bottom: 20px;*/
    color: #957960;
    .titleName {
      float: left;
      line-height: 24px;
      border-bottom: 3px solid #957960;
      padding-bottom: 13px;
    }
  }
  .inforList {
    padding: 20px 0;
    border-bottom: 1px solid #e8e8e8;
    li {
      margin-bottom: 15px;
      position: relative;
      color: #000;
      /*font-size: 16px;*/
      .listLeft {
        float: left;
        width: 40%;
      }
      .listRight {
        margin-left:  90px;
        padding: 0 20px 0 0;
        line-height: 24px;
      }
    }
    .title{
      color: #999;
    }
  }
  .inforList li:last-child {
    margin-bottom: 0px;
    position: relative;
    button{
      position: absolute;
      right: 0;
      top:-9px;
    }
  }
  .pageout {
    text-align: center;
    margin-top: 35px;
    height: 34px;
  }

</style>
<script type="text/ecmascript-6">
  import nodata from '../template/null'
  import {myInvoicePageWeb,centreInfoWeb,invoiceWaitWeb} from '../../http'
  import {getStore} from '../../storage'
  import {timeFilter} from  "../../myFilters"
    export default {
        name: 'orderdetail',
        props: {},
        data() {
            return {
              tab:0,
              isSpinShow:false,
              pageNumber:1,       //页码
              total:0,            //总数
              size:6,            //每页记录数
              invoices:'',        //发票记录列表
              waitInvoices: []
            };
        },
        methods: {
            changeTab(tab){
                this.pageNumber = 1
                this.isSpinShow = true;
                if (tab == 0) {//待开票
                    this.invoiceWait()
                } else if (tab == 1) {
                    this.getFapiaoJilu()
                }
            },
          invoiceWait(){
              invoiceWaitWeb({pageNumber: this.pageNumber, pageSize: this.size}).then(res => {
                  this.isSpinShow = false;
                  console.info(res)
                  if(res.code === 200) {
                      this.total = res.data.total;
                      this.waitInvoices = res.data.rows;
                  }else {
                      this.$Notice.warning({
                          title: "个人中心提醒",
                          desc: res.info,
                          duration: 3,
                      });
                  }
              }).catch()
          },
          //复制快递单号
          copyExpressNo(expressNo){
            var oInput = document.createElement('input');
            if(expressNo !== undefined && expressNo !== null && expressNo !== ''){
              oInput.value = expressNo;
            }
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';
            oInput.style.display='none';
            this.$Notice.success({
              desc: "单号复制成功！",
              duration: 1.5,
            });
          },
          //换页
          changePage(pageNumber){
            this.pageNumber = pageNumber;
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //获取发票记录
                  myInvoicePageWeb({pageNumber: this.pageNumber, pageSize: this.size}).then(res => {
                    if(res.code === 200) {
                      this.isSpinShow = false;
                      this.total = res.data.list.total;
                      this.invoices = res.data.list.rows;
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$parent.loginInput.showModal()
                }
              }).catch()
            }
          },
          getFapiaoJilu(){
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //获取发票记录
                  myInvoicePageWeb({pageNumber: this.pageNumber, pageSize: this.size}).then(res => {
                    this.isSpinShow = false;
                    if(res.code === 200) {
                      this.total = res.data.list.total;
                      this.invoices = res.data.list.rows;
                    }else {
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                }else {
                  this.isSpinShow = false;
                }
              }).catch()
          }
        },
        created() {
          this.invoiceWait()
        },
        components: {
          nodata
        }
    }
</script>
